import React, { Component } from 'react';
import { Select, Search, Grid, DatePicker } from '@alifd/theme-ds-jxc';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import PageHead from '../../../../components/PageHead';
import service from '../../../../utils/service';
import api from '../../../../utils/api';

const { RangePicker } = DatePicker;
const { Row, Col } = Grid;
export default class chooseHead extends Component {
  static propTypes = {};
  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      search: '',
      placeArr: [], // 地区列表
      filterData: {},
    };
  }
  handleFormChange = (value) => {
    this.setState(
      {
        filterData: value,
      }, () => {
        this.props.filterChange(this.state.filterData);
      }
    );
  };
  // 获取地区参数
  getPlaceArr = () => {
    service({
      method: 'get',
      url: api.SuperPlace,
    })
      .then((res) => {
    
        const OplaceArr = [];
        res.data.list.forEach((item) => {
          OplaceArr.push({ label: item.place, value: item.id.toString() });
        });
        OplaceArr.sort((item1, item2) => {
          return item1.label.localeCompare(item2.label, 'cn');
        });
        this.setState({ placeArr: OplaceArr });
      });
  };
  componentDidMount() {
    this.getPlaceArr();
  }
  render() {
    return (
      <div style={styles.overview}>
        <PageHead title="采购付款筛选" />
        <IceContainer style={styles.alignRight}>
          <IceFormBinderWrapper onChange={this.handleFormChange}>
            <Row gutter="5">
              <Col span="6" >
                <span className="SelectLabel">地点</span>
                <IceFormBinder name="place">
                <Select dataSource={this.state.placeArr} size="large" autoWidth placeholder="请选择供应商所在地区" className="Select" hasClear />
              </IceFormBinder>
              </Col>
              {/* <Col span="7">
                <span className="SelectLabel">采购时间</span>
                <IceFormBinder name="time">
                <RangePicker size="large" className="DatePicker" />
              </IceFormBinder>
              </Col> */}
              <Col span="7">
              <span className="SelectLabel">供应商搜索</span>
                <IceFormBinder name="search">
                <Search
                  type="normal"
                  placeholder="请输入供应商名称或供应商联系人"
                  size="medium"
                  className="Select"
                />
              </IceFormBinder>
              </Col>
            </Row>
          </IceFormBinderWrapper>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  overview: {
    h3: {
      fontSize: '20px',
      textAlign: 'left',
      lineHeight: '30px',
      fontFamily: 'SourceHanSans-Medium',
      color: '#333333',
      marginBottom: '20px',
    },
  },
  alignRight: {
    textAlign: 'right',
  },
  container: {
    padding: '0',
  },
  alignLeft: {
    float: 'left',
  },
  col: {
    margin: '10px 40px 10px 0',
    float: 'left',
  },
  Select: {
    float: 'left',
    width: '200px',
  },
  date: {
    float: 'left',
    width: '300px',
  },
  SelectLabel: {
    fontSize: '14px',
    lineHeight: '40px',
    float: 'left',
    margin: '0 10px 0 0',
    padding: '0',
    color: '#666',
    textAlign: 'right',
    minWidth: '60px',
  },
  search: {
    width: '300px',
  },
  row: {
    marginBottom: '20px',
  },
  input: {
    float: 'left',
  },
};
